/* stylelint-disable */
#demo {
  background-color: #f0f0f0;
  counter-reset: demo 0;
  > div {
    background-color: #fff;
    position: relative;
    overflow: hidden;
    min-height: 150px;
    border-radius: 6px;
    & + div {
      margin-top: 15px;
    }
    &::before {
      display: block;
      font-size: 18px;
      padding: 5px;
      counter-increment: demo 1;
      content: 'Demo' counter(demo) '. ';
    }
  }
}

.demo1 {
  label {
    &::after {
      content: '显示更多';
    }
  }
  input[name='toggle']:focus {
    & ~ label {
      &::after {
        content: '收起文本';
      }
    }
  }
}
.demo2 {
  a {
    &:empty {
      &::after {
        content: '链接内容为：' attr(href);
      }
    }
  }
}
.demo3 {
  ul {
    display: flex;
    font-weight: bold;

    li {
      &:not(:last-child) {
        margin-right: 5px;

        &::after {
          content: '\276D';
          margin-left: 5px;
        }
      }
    }
  }
}
.demo4 {
  .progress {
    width: 50%;
    height: 17px;
    margin: 5px;
    color: #fff;
    background-color: #f1f1f1;
    font-size: 12px;

    transition: width 1s ease;

    &::before {
      counter-reset: percent var(--percent);
      content: counter(percent) '%';

      display: inline-block;
      width: calc(100% * var(--percent) / 100);
      max-width: 100%;
      height: inherit;
      text-align: right;
      background-color: #2486ff;
      animation: progress 1s ease forwards;
    }
    @keyframes progress {
      from {
        width: 0;
      }
      to {
        width: calc(100% * var(--percent) / 100);
      }
    }
  }
}
.demo5 {
  [data-tooltip] {
    position: relative;

    &::after {
      content: attr(data-tooltip);
      display: none;
      position: absolute;

      // 漂浮在按钮上方并居中
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translate(-50%, 0);

      padding: 5px;
      border-radius: 4px;
      color: #fff;
      background-color: #313131;
      white-space: nowrap;
      z-index: 1;
    }
    // 鼠标移入button的时候显示tooltip
    &:hover {
      &::after {
        display: block;
      }
    }
  }
}

.demo6 {
  .section {
    counter-reset: section 0; // 外层计数器
    h1 {
      &::before {
        counter-increment: section 1; // 自增1
        content: 'Section' counter(section) '. ';
      }
    }
    // 子章节
    .subsection {
      counter-reset: subsection 0; // 内层计数器
      h2 {
        &::before {
          counter-increment: subsection 1; // 自增1
          content: counter(section) '.' counter(subsection); // 计数器是有作用域的，这里可以访问外层计数器
        }
      }
    }
  }
}
.demo7 {
  p {
    &::after {
      content: '.';
      animation: loading 2s ease infinite;
      @keyframes loading {
        33% {
          content: '..';
        }

        66% {
          content: '...';
        }
      }
    }
  }
}
.demo8 {
  .no-more {
    &::before {
      content: '——';
      margin-right: 10px;
    }

    &::after {
      content: '——';
      margin-left: 10px;
    }
  }
  .or {
    display: flex;
    align-items: center;
    &:before,
    &:after {
      content: '';
      height: 2px;
      background: #c5c5c5;
      flex-grow: 1;
    }
    &:before {
      margin-right: 10px;
    }

    &:after {
      margin-left: 10px;
    }
  }
}
.demo9 {
  table,
  tr,
  th,
  td {
    border: 1px solid #d6d6d6;
  }
  table {
    border-collapse: collapse;
    width: 100%;
    color: #555;
    font-size: 14px;
    table-layout: fixed;
  }
  th,
  td {
    padding: 6px 12px;
  }
  tr:nth-child(2n + 1) {
    background: aliceblue;
  }
  tr {
    transition: background-color 1s;
  }
  tr:hover {
    background: lightpink;
  }
}
.demo10 {
  .container {
    display: flex;
    justify-content: center;
  }
  .container:focus-within {
    transform: scale(1.5);
  }
  .container:focus-within button {
    transform: rotate(1turn);
    transition: 1.5s cubic-bezier(0.24, 1.82, 0.53, 1.65);
  }
}
.demo11 {
  padding: 10px 30px;
  div {
    width: 190px;
    height: 190px;
    background: aqua;
    position: relative;
  }
  div:before,
  div:after {
    position: absolute;
    content: '';
    left: -5px;
    right: -5px;
    top: -5px;
    bottom: -5px;
    border: 5px solid #ff00ff88;
  }
  div:before {
    animation: move 5s linear infinite;
  }
  div:after {
    border-color: #ff000088;
    animation: move 3s linear infinite alternate -2.5s;
  }
  @keyframes move {
    0%,
    100% {
      clip: rect(0, 200px, 5px, 0);
    }
    25% {
      clip: rect(0, 200px, 200px, 195px);
    }
    50% {
      border-color: #00ff0088;
      clip: rect(195px, 200px, 200px, 0);
    }
    75% {
      clip: rect(0, 5px, 200px, 0px);
    }
  }
}
.demo12 {
  div {
    width: 300px;
    height: 300px;
    background: radial-gradient(#419af6 26%, white 0, white 30%, transparent 0), linear-gradient(120deg, #5dd52f 50%, transparent 0) 0 100% / 115% 44%,
      linear-gradient(60deg, #5dd533 50%, transparent 0) 0 0/ 35% 70%, linear-gradient(120deg, #ff0000 50%, transparent 0) 0 0 / 50% 197%, linear-gradient(red, red) 0 0 / 100% 29%,
      linear-gradient(#fdeb35, #fce72a);
    background-repeat: no-repeat;
    border-radius: 100%;
    border: 8px solid white;
  }
}
@main: yellow;
.demo13 {
  input[name='rate'] {
    // 高亮的星星
    &:checked,
    &:checked ~ input[name='rate'] {
      &::after {
        content: '\e73c';
        color: @main;
      }
    }
  }

  input[name='rate'] {
    transition: transform 0.2s ease; // 加入过渡效果
    // 高亮的星星
    &:checked,
    &:hover {
      &::after {
        content: '\e73c';
        color: @main;
      }
      // 兄弟元素一起高亮
      & ~ input[name='rate'] {
        &::after {
          content: '\e73c';
          color: @main;
        }
      }
    }
    // 鼠标移入使星星放大
    &:hover {
      transform: scale(1.2);
    }
  }
}
.demo14 {
  .g-container {
    width: 300px;
    margin: 50px auto;

    p {
      line-height: 1.4;
      padding-left: 40px;
    }

    input {
      position: absolute;
      border: none;
      outline: none;
      background: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1px solid #aaa;
      box-sizing: border-box;
      top: 50%;
      left: 10px;
      transform: translate(0, -50%);
      cursor: pointer;
    }

    .g-section {
      position: relative;
      padding: 10px;
      box-sizing: border-box;
      border: 1px solid transparent;

      &:focus-within {
        // border: 1px solid #bbb;
        background: linear-gradient(90deg, #03a9f4 50%, transparent 0) repeat-x, linear-gradient(90deg, #03a9f4 50%, transparent 0) repeat-x, linear-gradient(0deg, #03a9f4 50%, transparent 0) repeat-y,
          linear-gradient(0deg, #03a9f4 50%, transparent 0) repeat-y;
        background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;
        animation: linearGradientMove 0.5s infinite linear;

        input {
          background: #03a9f4;
        }
      }
    }
  }

  @keyframes linearGradientMove {
    100% {
      background-position: 6% 0, -6% 100%, 0 -6%, 100% 6%;
    }
  }
}
.demo15 {
  .container {
    width: 322px;
    margin: 50px auto;
    padding: 10px;
    border: 1px solid #ddd;
  }

  .nav-box {
    font-size: 0;
  }

  button {
    width: 150px;
    height: 64px;
    box-sizing: border-box;
    outline: none;
    background: #fff;
    border: 1px solid #ddd;
    font-size: 18px;
    cursor: pointer;
  }

  button:focus-within {
    color: #fff;
    background: #ffcc00;
  }

  .content-box {
    font-size: 24px;
    border: 1px solid #ddd;
    height: 100px;
    div {
      display: none;
    }
  }

  .nav-box:not(:focus-within) {
    .nav-A {
      color: #fff;
      background: #ffcc00;
    }

    .content-A {
      display: block;
    }
  }

  .nav-A:focus-within ~ .content-box .content-A {
    display: block;
  }

  .nav-B:focus-within ~ .content-box .content-B {
    display: block;
  }

  // .nav-box:focus-within {
  //     .nav-A:focus ~ .content-box .content-A {
  //         display: block;
  //     }

  //     .nav-B:focus ~ .content-box .content-B {
  //         display: block;
  //     }
  // }
}
.demo16 {
  .g-container {
    position: relative;
    margin: 100px auto;
    display: flex;
    flex-wrap: wrap;
    width: 500px;
    height: 60px;
    overflow: hidden;
    transition: 0.3s;
    & > * {
      border: none;
      outline: none;
    }
    .g_input_search {
      padding: 0 15px;
      height: 100%;
      width: 100%;
      border: 1px solid #ddd;
      font-size: 18px;
      box-sizing: border-box;

      &:not(:placeholder-shown) {
        border: 1px solid #03a9f4;

        + .g_button_search {
          opacity: 1;
        }
      }

      &:placeholder-shown {
        + .g_button_search {
          opacity: 0;
        }
      }
    }
    .g_button_search {
      background: #03a9f4;
      color: #feffd4;
      font-size: 15px;
      cursor: pointer;
      width: 100px;
      height: calc(100% - 20px);
      transition: 0.3s;
      position: absolute;
      right: 10px;
      top: 10px;
    }
    &:focus-within {
      transform: translateY(-4px);
      border-color: #bbb;
      box-shadow: 4px 4px 10px 2px #ddd;
    }
  }
}
.demo17 {
  .page {
    width: 100%;
    height: 50vh;
    background: #fdfdfd;
    font-family: 'Encode Sans Condensed', sans-serif;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #212121;
    position: relative;
  }

  header {
    display: flex;
    // position: fixed;
    position: absolute;
    width: 100%;
    height: 70px;
    background: #212121;
    color: #fff;
    justify-content: center;
    align-items: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  main {
    padding: 70px 20px 0;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  main > div {
    margin: auto;
    max-width: 600px;
  }

  main h2 span {
    color: #bf7497;
  }

  main p {
    line-height: 1.5;
    font-weight: 200;
    margin: 20px 0;
  }

  main small {
    font-weight: 300;
    color: #888;
  }

  #nav-container {
    // position: fixed;
    position: absolute;
    height: 50vh;
    width: 100%;
    pointer-events: none;
  }
  #nav-container .bg {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    height: calc(100% - 70px);
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
    background: #000;
  }
  #nav-container:focus-within .bg {
    visibility: visible;
    opacity: 0.6;
  }
  #nav-container * {
    visibility: visible;
  }

  .button {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    border-radius: 0;
    height: 70px;
    width: 30px;
    cursor: pointer;
    pointer-events: auto;
    margin-left: 25px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .icon-bar {
    display: block;
    width: 100%;
    height: 3px;
    background: #aaa;
    transition: 0.3s;
  }
  .icon-bar + .icon-bar {
    margin-top: 5px;
  }

  #nav-container:focus-within .button {
    pointer-events: none;
  }
  #nav-container:focus-within .icon-bar:nth-of-type(1) {
    transform: translate3d(0, 8px, 0) rotate(45deg);
  }
  #nav-container:focus-within .icon-bar:nth-of-type(2) {
    opacity: 0;
  }
  #nav-container:focus-within .icon-bar:nth-of-type(3) {
    transform: translate3d(0, -8px, 0) rotate(-45deg);
  }

  #nav-content {
    margin-top: 70px;
    padding: 20px;
    width: 90%;
    max-width: 300px;
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100% - 70px);
    background: #ececec;
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateX(-100%);
    transition: transform 0.3s;
    will-change: transform;
    contain: paint;
  }

  #nav-content ul {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  #nav-content li a {
    padding: 10px 5px;
    display: block;
    text-transform: uppercase;
    transition: color 0.1s;
  }

  #nav-content li a:hover {
    color: #bf7497;
  }

  #nav-content li:not(.small) + .small {
    margin-top: auto;
  }

  .small {
    display: flex;
    align-self: center;
  }

  .small a {
    font-size: 12px;
    font-weight: 400;
    color: #888;
  }
  .small a + a {
    margin-left: 15px;
  }

  #nav-container:focus-within #nav-content {
    transform: none;
  }
}
.demo18 {
  @bg-normal: 'https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png';
  @bg-username: 'https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png';
  @bg-password: 'https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png';

  .g-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
  }

  .g-container {
    position: relative;
    width: 318px;
    margin: 100px auto;
    height: 370px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    z-index: 10;

    h2 {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 30px;
    }

    input {
      outline: none;
      padding: 10px;
      width: 100%;
      border: 1px solid #e9e9e9;
      border-radius: 2px;
      outline: none;
      box-sizing: border-box;
      font-size: 16px;
    }
  }

  img {
    position: absolute;
    top: -20%;
    left: 50%;
    width: 120px;
    height: 95px;
    transform: translate(-50%, 0);
  }

  .g-username {
    margin-bottom: 10px;

    img {
      display: none;
      width: 120px;
      height: 113px;
    }
  }

  .g-username:focus-within ~ img {
    display: none;
  }

  .g-username:focus-within {
    input {
      border-color: #007fff;
    }
    img {
      display: block;
    }
  }

  .g-password {
    margin-bottom: 10px;

    img {
      display: none;
      width: 103px;
      height: 84px;
      top: -15%;
    }
  }

  .g-password:focus-within ~ img {
    display: none;
  }

  .g-password:focus-within {
    input {
      border-color: #007fff;
    }
    img {
      display: block;
    }
  }
}
.demo19 {
  ul {
    display: flex;
    position: absolute;
    width: 800px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  li {
    position: relative;
    padding: 20px;
    font-size: 24px;
    color: #000;
    line-height: 1;
    transition: 0.2s all linear;
    cursor: pointer;
  }

  li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
    transition: 0.2s all linear;
  }

  li:hover::before {
    width: 100%;
    top: 0;
    left: 0;
    transition-delay: 0.1s;
    border-bottom-color: #000;
    z-index: -1;
  }

  li:hover ~ li::before {
    left: 0;
  }

  li:active {
    background: #000;
    color: #fff;
  }
}
.demo20 {
  .container {
    position: relative;
    width: 400px;
    margin: 50px auto;
  }
  .nav {
    position: relative;
    overflow: hidden;
  }
  li {
    width: 200px;
    float: left;
    text-align: center;
    background: #ddd;
  }
  li a {
    display: block;
    width: 200px;
    line-height: 36px;
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    color: #000;
  }
  #content1,
  #content2 {
    position: absolute;
    overflow: hidden;
    top: 36px;
    width: 400px;
    height: 100px;
    border: 1px solid #999;
    box-sizing: border-box;
    padding: 10px;
  }
  #content1,
  #content2 {
    display: none;
    width: 100%;
    background: #fff;
  }
  #content1:target,
  #content2:target {
    display: block;
  }
  #content1.active {
    display: block;
  }
  .active ~ .nav li {
    &:first-child {
      background: #ff7300;
      color: #fff;
    }
  }
  #content1:target ~ .nav li {
    background: #ddd;
    color: #000;
    // 改变li元素的背景色和字体颜色
    &:first-child {
      background: #ff7300;
      color: #fff;
    }
  }
  #content2:target ~ .nav li {
    background: #ddd;
    color: #000;
    // 改变li元素的背景色和字体颜色
    &:last-child {
      background: #ff7300;
      color: #fff;
    }
  }
  .wrap {
    position: absolute;
    overflow: hidden;
    top: 36px;
    width: 400px;
    height: 100px;
    border: 1px solid #999;
    box-sizing: border-box;
  }
}
.demo21 {
  div {
    position: relative;
    margin: 50px auto;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    // border:1px solid deeppink;
    background-color: deeppink;
    line-height: 120px;
    text-indent: 5px;
  }

  div::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-clip-path: polygon(0 0, 0 100px, 100px 100px, 0 0);
    background: #fff;
    border: 1px solid #333;
    transform: translateX(-120px);
    animation: move 5s infinite linear;
  }

  div::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-clip-path: polygon(100px 99px, 100px 0, 1px 0, 100px 99px);
    background: #fff;
    border: 1px solid #333;
    transform: translateX(120px);
    animation: move 5s infinite linear;
  }

  @keyframes move {
    40% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(0px);
    }
  }
}
.demo22 {
  .bg {
    position: relative;
    margin: 50px auto;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: conic-gradient(
      #f1462c 0%,
      #fc5d2c 12.4%,
      #fff 12.5%,
      #fff 12.5%,
      #fc5d2c 12.5%,
      #fba73e 24.9%,
      #fff 24.9%,
      #fff 25%,
      #fba73e 25%,
      #e0fa4e 37.4%,
      #fff 37.4%,
      #fff 37.5%,
      #e0fa4e 37.5%,
      #12dd7e 49.9%,
      #fff 49.9%,
      #fff 50%,
      #12dd7e 50%,
      #0a6e3f 62.4%,
      #fff 62.4%,
      #fff 62.5%
    );
    transform: rotate(-112.5deg);
    transform-origin: 50% 50%;
  }

  .bg::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 370px;
    height: 370px;
    border-radius: 50%;
    background: #fff;
  }

  .bg::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(#fff 0%, #fff 25%, transparent 25%, transparent 100%), conic-gradient(#f1462c 0 12.5%, #fba73e 0 25%, #e0fa4e 0 37.5%, #12dd7e 0 50%, #0a6e3f 0 62.5%, #fff 0 100%);
  }

  .point {
    position: absolute;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    background: radial-gradient(#467dc6 0%, #a4c6f3 100%);
    border-radius: 50%;
    z-index: 999;
  }

  .point::before {
    content: '';
    position: absolute;
    width: 5px;
    height: 350px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0);
    border-radius: 100% 100% 5% 5%;
    background: linear-gradient(180deg, #9bc7f6 0, #467dc6 50%, transparent 50%, transparent 100%);
    animation: rotate 3s cubic-bezier(0.93, 1.32, 0.89, 1.15) infinite;
  }

  @keyframes rotate {
    50% {
      transform: translate(-50%, -50%) rotate(150deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(150deg);
    }
  }
}
.demo23 {
  .basis {
    width: 250px;
    height: 250px;
    margin: 50px auto;
    background: conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%, #000 0);
    border: 5px solid #999;
  }

  .wallpaper {
    width: 250px;
    height: 250px;
    margin: 50px auto;
    background: conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%, #000 0);
    background-size: 50px 50px;
    border: 5px solid #999;
  }

  .wallpaper2 {
    width: 250px;
    height: 250px;
    margin: 50px auto;
    background: conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%, #000 0);
    background-size: 50px 50px;
    border-radius: 50%;
    border: 5px solid #999;
  }
}
.demo24 {
  .container {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 2em;
    filter: contrast(20);
    background-color: black;
    overflow: hidden;
  }

  h1 {
    font-family: Righteous;
    color: white;
    font-size: 4rem;
    text-transform: uppercase;
    line-height: 1;
    animation: letterspacing 5s infinite alternate ease-in-out;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    letter-spacing: -2.2rem;
  }

  @keyframes letterspacing {
    0% {
      letter-spacing: -2.2rem;
      filter: blur(0.3rem);
    }

    50% {
      filter: blur(0.5rem);
    }

    100% {
      letter-spacing: 0.5rem;
      filter: blur(0rem);
      color: #fff;
    }
  }
}
.demo25 {
  .filter-mix {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 200px;
    filter: contrast(20);
    background: #fff;
  }

  .filter-mix::before {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #333;
    top: 40px;
    left: 40px;
    z-index: 2;
    filter: blur(6px);
    box-sizing: border-box;
    animation: filterBallMove 4s ease-out infinite;
  }

  .filter-mix::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #3f51b5;
    top: 60px;
    right: 40px;
    z-index: 2;
    filter: blur(6px);
    animation: filterBallMove2 4s ease-out infinite;
  }

  @keyframes filterBallMove {
    50% {
      left: 140px;
    }
  }

  @keyframes filterBallMove2 {
    50% {
      right: 140px;
    }
  }
}
.demo26 {
  div {
    position: absolute;
    width: 200px;
    height: 60px;
    line-height: 60px;
    font-size: 32px;
    cursor: pointer;
    color: #333;
    text-align: center;
    transition: color 0.5s;
    margin: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  div::before {
    content: '';
    position: absolute;
    left: 0%;
    bottom: 0;
    width: 200px;
    transform: scaleX(0);
    height: 2px;
    background: deeppink;
    z-index: -1;
    transition: all 0.5s;
  }

  div:hover::before {
    transform: scaleX(1);
  }
}

.demo27 {
  @main: #807af1;
  .container {
    input {
      display: none;
    }
    // 标签列表
    .navs {
      display: flex;
      list-style: none;
      li {
        padding: 10px;
      }
    }
    // 内容列表（默认隐藏，选中的才显示）
    .contents {
      li {
        display: none;
        padding: 10px;
      }
    }
    // 标签选中的样式（大家可以配合类名使用for循环，这里写死两个标签）
    .nav1:checked ~ .navs li:first-child,
    .nav2:checked ~ .navs li:last-child {
      color: @main;
      border-bottom: 1px solid @main;
    }
    // 内容显示样式
    .nav1:checked ~ .contents li:first-child,
    .nav2:checked ~ .contents li:last-child {
      display: block;
    }
    // 内容列表
    .contents {
      li {
        animation: fade 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); // 内容切换动画（可选）
      }
    }
    // 内容切换动画（可选）
    @keyframes fade {
      from {
        transform: translateX(20px);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }
  }
}

.demo28 {
  input {
    // 验证通过时按钮的样式
    &:valid {
      & ~ button {
        pointer-events: all;
        cursor: pointer;

        &::after {
          content: '提交👍';
        }
      }
    }
    // 验证不通过时按钮的样式
    &:invalid {
      & ~ button {
        pointer-events: none; // 去除点击事件，让按钮无法点击

        &::after {
          content: '未通过验证😒';
        }
      }
    }
  }
}

.demo29 {
  p {
    margin-bottom: 1.5rem;
  }

  a {
    position: relative;
    text-decoration: none;
    color: #000;
  }

  a[href$='.pdf'] {
    &:before {
      content: '';
      display: inline-block;
      vertical-align: middle;
      margin-right: 8px;
      width: 18px;
      height: 18px;
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/182774/np_pdf_377198_000000.svg) center/20px no-repeat;
      padding: 3px;
      //outline: solid 1px red;
    }
  }

  a[href$='.doc'] {
    &:before {
      content: '';
      display: inline-block;
      vertical-align: middle;
      margin-right: 8px;
      width: 18px;
      height: 18px;
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/182774/np_word_1306442_000000.svg) center/20px no-repeat;
      padding: 3px;
      //outline: solid 1px red;
    }
  }
}
